<template>
	<view class="card_deatil">
		<Card :userQuery="query" type="detail" @stopClick="parentHandleStopCard">
		</Card>
		<!-- 停卡时间 -->
		<view v-if="query.stop_card_time" class="car_time">
			<text>停卡时间</text>
			<view>{{query.stop_card_time}}</view>
		</view>
		<site :siteList="query.shop_list" :title="'服务场地'" :more="query.describe_str" @routeMore="routeMore" class="mb">
		</site>
		<BoxComponent :title="query.equity_info.title">
			<u-parse :html="query.equity_info.content"></u-parse>
		</BoxComponent>
		<BoxComponent :title="query.notes_info.title">
			<u-parse :html="query.notes_info.content"></u-parse>
		</BoxComponent>
		<view class="empty">

		</view>
		<view class="foot">
			<view class="btn" @click="pay">
				立即续费
			</view>
		</view>
		<stopCard :visible.sync="visible" :useStopCard="useStopCard" :stopCardDesc="stopCardDesc" @confirm="confirm">
		</stopCard>
	</view>
</template>

<script>
	import Card from './components/card.vue'
	import site from '@/components/site.vue'
	import stopCard from './components/stopCar.vue'
	import BoxComponent from '@/components/BoxComponent.vue'
	import {
		mycardinfo,
		stopCar,
		startCar
	} from '@/api/user.js'
	export default {
		components: {
			Card,
			site,
			BoxComponent,
			stopCard
		},
		data() {
			return {
				stopCardDesc: '', // 弹窗描述文案（新增）
				visible: false,
				useStopCard: '',
				currentCard: null,
				content1: '',
				content2: '',
				query: {
					memberStatus: 1,
					use_stop_card: 'no_use', // 默认未使用
					site: [{
							status: 1,
							title: '温州中庚漫游天地店',
							juli: '139m'
						},
						{
							status: 1,
							title: '温州中庚漫游天地店',
							juli: '1.2km'
						}
					]
				}
			}
		},
		onLoad(e) {
			this.getmycardinfo(e)
		},
	
		methods: {
			// 停卡服务
			parentHandleStopCard(e) {
				// 过滤“已使用（use）”状态（无需操作）
				if (e.use_stop_card === 'use') {
					
					return;
				}
				this.useStopCard = e.use_stop_card;
				this.stopCardDesc = e.stop_card_desc || (e.use_stop_card === 'no_use' ? '确定要停卡吗？' : '确定要启用吗？');
				this.currentCard = e;
				this.visible = true;
			},
			async confirm() {
				// 校验卡片信息（必须有bag_id）
				if (!this.currentCard || !this.currentCard.bag_id) {
					uni.showToast({
						title: '卡片信息异常',
						icon: 'none'
					});
					this.visible = false;
					return;
				}
				const bagId = this.currentCard.bag_id;
				let apiResult;
				try {
					uni.showLoading({
						title: '操作中...',
						mask: true
					});

					if (this.useStopCard === 'no_use') {
						apiResult = await stopCar({

							bag_id: bagId

						});
					} else if (this.useStopCard === 'using') {
						apiResult = await startCar({

							bag_id: bagId

						});
					}
					if (apiResult && apiResult.data.code === 1) {
						const successMsg = this.useStopCard === 'no_use' ? '停卡成功' : '启用成功';
						uni.showToast({
							title: successMsg
						});
						this.visible = false;
						this.getmycardinfo({
							bag_id: bagId
						});
					} else {
						uni.showToast({
							title: apiResult?.data?.msg || '操作失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('操作失败:', error);
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			pay() {
				uni.navigateTo({
					url: '/pageA/member/purchase?par=' + this.query.par
				})
			},
			routeMore() {
				console.log('routeMore');
			},
			getmycardinfo(e) {
				mycardinfo(e).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.query = res.data
						this.currentCard = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.car_time {
		width: 100%;
		background: #ffffff;
		border-radius: 16px;
		padding: 20rpx 32rpx;
		margin-top: 24rpx;

		text {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
		}

		view {
			opacity: 0.6;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #000000;
		}
	}

	.card_deatil {
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.mb {
			margin-top: 20rpx;
		}
	}

	.empty {
		width: 100%;
		height: 180rpx;
	}

	.foot {
		width: 100%;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		padding-top: 10rpx;

		.btn {
			width: 710rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>